<script setup>
	import {onMounted} from 'vue';
	import * as echarts from "echarts";
	import {ref} from "vue";
	import {chartApi} from "@/api/chart.js";
	
	const chartRef=ref()
	
	//页面加载完执行
	onMounted(()=>{
		const myChart=echarts.init(chartRef.value)
		chartApi.selectCategoryAmount().then(result=>{
			let xCategory=[]
			let yAmount = []
			if(result.code==0) {
				let list = result.data
				list.forEach(item => {
					yAmount.push(item.totalAmount);
					xCategory.push(item.categroy1Name);
				})
			}
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					title: {
						text: '各分类销售额统计',
						left: 'center'
					},
					xAxis: {
						type: 'category',
						data: xCategory,
						
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name:'销售额',
							data: yAmount,
							type: 'bar',
							barWidth:'60%'
						}
					]
				};
				
				myChart.setOption(option);
		})
		
		
	})
	
</script>

<template>
	<div ref="chartRef" style="width: 100%;height: 100%"></div>
</template>

<style scoped>

</style>